<template>
  <van-popup position="right" :value="editShow">
    <van-nav-bar
      left-arrow
      title="修改昵称"
      @click-right="clickRight"
      @click-left="$emit('update:editShow', false)"
    >
      <template #right>
        <div style="color:#f40;">发表</div>
      </template>
    </van-nav-bar>
    <van-form ref="form">
      <van-field v-model="inputValue" :rules="rules"></van-field>
    </van-form>
  </van-popup>
</template>

<script>
export default {
  name: 'Edit',
  props:['editShow'],
  data(){
      return {
          showEdit:false,
          inputValue:'',
          rules:[{
              required:true,message:'必填',trigger:'onChange'
          },
          {validator:value=>{return value !==this.$store.state.user.userInfo.name},
          message:'不能一样',
          trigger:'onChange'}]
      }
  },
  methods:{
      clickRight(){
          console.log('??');
          this.$refs.form.validate().then(()=>{
              console.log('成功');
              this.$emit('editUserInfo',{
                  key:'name',
                  value:this.inputValue
              })
              this.$emit('update:editShow',false)
          }).catch(()=>{})
      }
  }
}
</script>

<style lang='less' scoped>
.van-popup{
    width: 100%;
    height: 100%;
}
::v-deep .van-field__control{
    background-color: #ccc;
}
</style>
